<template>
  <el-container>
    <el-aside width="200px">
      <el-menu default-active="2" class="el-menu-vertical-demo">
        <el-menu-item v-for="item in MainAside" :key="item.path" :index="item.path" @click="navigateTo(item.path)"
          :class="item.path === route.path ? 'select-item' : ''">
          <span>{{ item.meta.title }}</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main><router-view></router-view></el-main>
  </el-container>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
const route = useRoute();
/* 
  系统设置
*/
const routes = useRouter().getRoutes().filter((item) => item.path.includes('/systemSettings/'));

const MainListAside = routes.filter((item) => item.meta.layoutType === "Aside");
const MainAside = ref(MainListAside);

const routerPath = useRouter(); // useRouter 不能放在函数中执行
function navigateTo(params: string) {
  routerPath.replace(params)
}
</script>
<style lang="less" scoped>
.el-container {
  width: 100%;
  height: calc(100%);

  .el-menu {
    height: calc(100%);
    background-color: #F3F7FD;
    padding-top: 30px;
    border: none;

    .el-menu-item {
      border-bottom: 1px solid #eee;
    }

    .el-menu-item:hover {
      background-color: #F3F7FD;
    }

    :deep(.select-item) {
      background-color: #EAE9FF;
      border-top-left-radius: 30px;
      border-bottom-left-radius: 30px;
      border-right: 3px solid rgba(104, 96, 255, 1);

      span {
        color: rgb(104, 96, 255);
      }
    }

    .select-item:hover {
      background-color: #EAE9FF;
    }
  }

  .el-main {
    padding: 15px;
  }
}
</style>
